<template>
  <div class="screen">
    <!-- 数据大屏展示内容 -->
    <div class="container" ref="screen">
      <!-- 顶部 -->
      <div class="top">
        <Top />
      </div>
      <!-- 底部 -->
      <div class="bottom">
        <!-- 左侧 -->
        <div class="left">
          <!-- 实时游客组件 -->
          <div class="tourist">
            <Tourist />
          </div>
          <!-- 男女比例组件 -->
          <div class="sex">
            <Sex />
          </div>
          <!-- 年龄比例组件-->
          <div class="age">
            <Age />
          </div>
        </div>
        <!-- 中间 -->
        <div class="center">
          <!-- 数据展示地图 -->
          <div class="majorDate">
            <MajorDate />
          </div>
          <!-- 30天趋势图 -->
          <div class="diagram">
            <Diagram />
          </div>
        </div>
        <!-- 右侧 -->
        <div class="right">
          <!-- 热门景区 -->
          <div class="hotPop">
            <HotPop />
          </div>
          <!-- 年度游客量 -->
          <div class="tearTouist">
            <YearTouist />
          </div>
          <!-- 预约渠道 -->
          <div class="reservation">
            <Reservation />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
/* 顶部组件 */
import Top from './components/top/index.vue'
/* 左侧上部分游客组件 */
import Tourist from './components/tourist/index.vue'
/* 左侧中间男女比例组件 */
import Sex from './components/sex/index.vue'
/* 左侧底部年龄组件 */
import Age from './components/age/index.vue'
/* 中间底部趋势图组件 */
import Diagram from './components/diagram/index.vue'
/* 中间大数据地图组件 */
import MajorDate from './components/majorDate/index.vue'
/* 右侧顶部热门景区组件 */
import HotPop from './components/hotPop/index.vue'
/* 右侧中间年度游客组件 */
import YearTouist from './components/tearTouist/index.vue'
/* 右侧底部预约渠道数据组件 */
import Reservation from './components/reservation/index.vue'
/* 获取数据大屏展示内容盒子的DOM元素 */
const screen = ref()
onMounted(() => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
})
/* 获取缩放比例 */
const getScale = (w = 1920, h = 1080) => {
  const ww = window.innerWidth / w /* 宽度比例 */
  const hh = window.innerHeight / h /* 高度比例 */
  return ww < hh ? ww : hh
}
/* 监听视口变化 */
window.onresize = () => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
}
</script>

<style lang="scss" scoped>
.screen {
  width: 100vw;
  height: 100vh;
  background: url('./images/bg.png') no-repeat;
  background-size: cover;
  .container {
    position: fixed;
    width: 1920px;
    height: 1080px;
    top: 50%;
    left: 50%;
    transform-origin: left top;
    .top {
      width: 100%;
      height: 50px;
    }
    .bottom {
      display: flex;
      .left {
        flex: 1;
        display: flex;
        height: 1040px;
        flex-direction: column;
        margin-right: 15px;
        .tourist {
          flex: 1.2;
        }

        .sex {
          flex: 1;
        }

        .age {
          flex: 1;
        }
      }
      .center {
        flex: 1.5;
        height: 1040px;
        display: flex;
        flex-direction: column;
        .majorDate {
          flex: 2;
          width: 100%;
        }
        .diagram {
          flex: 1;
          width: 100%;
        }
      }
      .right {
        flex: 1;
        height: 1040px;
        display: flex;
        margin-left: 40px;
        flex-direction: column;
        /* 热门景区 */
        .hotPop {
          width: 100%;
          flex: 1;
        }
        /* 年度游客 */
        .tearTouist {
          width: 100%;
          flex: 1;
        }
        /* 预约渠道 */
        .reservation {
          width: 100%;
          flex: 1;
        }
      }
    }
  }
}
</style>
